<template>
	<view class="content">
		<text class="text-title">{{articleData.title}}</text>
		<view class="info-view f-row">
			<view class="label1">原创</view>
			<text>{{articleData.author}}</text>
			<text class="label2">{{articleData.author}}</text>
			<text>{{articleData.createdAt}}</text>
		</view>
		<view class="info-view f-row">河北</view>
		<image class="image-top" :src="articleData.coverUrl"></image>
		<view class="text-content" v-html="articleData.unlockRequired==1?articleData.summary:articleData.content"></view>
		<view class="view-lock f-row c-center" @click="onClickLock" v-if="articleData.unlockRequired==1">
			<view class="lock-show-text f-row c-center r-center">
				<image src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/lock.png"></image>
				<text>解锁文章</text>
			</view>
		</view>
		<view class="wxad" v-if="bannerAd">
			<ad unit-id="adunit-32ee9f1ef2bea9fa" @error="offAd" @close="offAd"></ad>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			textContent: "",
			bannerAd: false,
			articleId: "",
			articleData: null,
		};
	},
	components: {
		
	},
	onLoad(item) {
		this.articleId = item.articleid;
		
		this.getArticleInfo(this.articleId);
	},
	methods: {
		offAd() {
			this.bannerAd = false
		},
		getArticleInfo(articleId) {
			let that = this;
			this.$api.request({
				url: this.$api.articles,
				data: {
					"id": articleId,
					"userId": 0
				}
			}).then( resp => {
				if (resp.code == 200 && resp.data) {
					that.articleData = resp.data;
				}
			});
		},
		onClickLock() {
			this.bannerAd = true;
			let that = this;
			this.$api.request({
				url: this.$api.addUserArticleUnlock,
				method: "POST",
				data: {
					"articleId": this.articleId,
					"userId": 0
				}
			}).then( resp => {
				if (resp.code == 200) {
					if (that.articleData) {
						that.articleData.unlockRequired = 0;
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
@import "@/static/css/app.less";
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	.text-title{
		position: relative;
		margin-top: 30rpx;
		width: 680rpx;
		font-size: 40rpx;
		font-weight: 500;
		color: #000;
	}
	.info-view{
		position: relative;
		margin-top: 20rpx;
		width: 680rpx;
		font-size: 26rpx;
		color: #b5b5b5;
		text{
			margin-left: 20rpx;
		}
		.label1{
			padding: 5rpx 10rpx;
			background: #f2f2f2;
			border-radius: 10rpx;
			font-size: 24rpx;
		}
		.label2{
			color: #66789f;
		}
	}
	.image-top{
		margin: 60rpx 0;
		width: 660rpx;
		height: 266rpx;
		background: #000;
	}
	.text-content{
		position: relative;
		font-size: 26rpx;
		color: #333333;
		width: 660rpx;
	}
	.view-lock{
		position: relative;
		top: -130rpx;
		width: 100%;
		background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 70%);
		padding-top: 200rpx;
		padding-bottom: 32rpx;
		.lock-show-text{
			position: absolute;
			width: 350rpx;
			height: 60rpx;
			bottom: 20rpx;
			font-size: 28rpx;
			border: 1px solid #fc5531;
			border-radius: 30rpx;
			color: #fc5531;
			white-space: nowrap;
			image{
				width: 32rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
		}
	}
	.wxad{
		position: fixed;
		bottom: 0;
		width: 710rpx;
	}
}
</style>